import React, { Component } from 'react'

export default class StateShow extends Component {
  state = {
    // flag 旗帜
    flag: 0
  }

  //声明事件回调函数
  change = () => {
    //更新状态
    this.setState({
      flag: this.state.flag + 1
    })
  }

  render() {
    //封装一个函数
    let getWidth = () => {
      switch(this.state.flag % 3){
        case 0:
          return 0;
        case 1:
          return '150px';
          break;
        case 2: 
          return '300px';
      }
    }

    return (
      <div>
        <button onClick={this.change}>点击切换</button>
        <hr />
        <div style={{
          width: getWidth(),
          height: '200px',
          background: '#c80',
          transition: 'all 0.5s',
          // display: this.state.flag ? 'block' : 'none'
          // opacity: this.state.flag ? 1 : 0
        }}></div>
      </div>
    )
  }
}
